<template>
  <div class="menu-admin">
    <div class="add-menu">
      <el-button type="primary" @click="addFirstMenu()" v-if="searchInterface('menus.store')">添加一级菜单</el-button>
      <el-button
        type="primary"
        @click="addSecondMenu()"
        :disabled="this.menu.length"
        v-if="searchInterface('menus.store')"
      >添加其他菜单</el-button>
    </div>
    <div class="edit-menu">
      <el-tree
        :data="menus"
        :props="defaultProps"
        node-key="id"
        ref="tree"
        :expand-on-click-node="false"
        :render-content="renderContent"
      ></el-tree>
    </div>
    <!-- 新增菜单 -->
    <el-dialog
      :title="(isAdd?'添加':'编辑')+'菜单?'"
      :visible.sync="dialogVisible"
      width="30%"
      @close="cancel"
    >
      <el-form label-width="140px" :rules="componentRules" :model="menu" ref="menu">
        <div v-if="root">
          <el-form-item label="图标" prop="icon">
            <el-select v-model="menu.icon" placeholder="请选择">
              <el-option v-for="item in iconList" :key="item" :label="item" :value="item">
                <span style="float: left">
                  <i :class="'iconfont '+item"></i>
                </span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ item }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="菜单标题" prop="title">
            <el-input v-model="menu.title" clearable></el-input>
          </el-form-item>
          <el-form-item label="是否启用?" prop="is_enable">
            <el-switch v-model="menu.is_enable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </div>
        <!-- 二级菜单 -->
        <div v-else>
          <el-form-item label="路由路径" prop="path">
            <el-input v-model="menu.path" clearable></el-input>
          </el-form-item>
          <el-form-item label="文件路径" prop="component_path">
            <el-input v-model="menu.component_path" clearable></el-input>
          </el-form-item>
          <el-form-item label="路由名字" prop="name">
            <el-input v-model="menu.name" clearable></el-input>
          </el-form-item>
          <el-form-item label="菜单标题" prop="title">
            <el-input v-model="menu.title" clearable></el-input>
          </el-form-item>
          <el-form-item label="所属目录" prop="parent_id">
            <el-cascader
              :options="menus"
              :props="{...menuProps,checkStrictly:true}"
              v-model="menuOptions"
              @change="handleChange"
            ></el-cascader>
          </el-form-item>
          <el-form-item label="是否启用?" prop="is_enable">
            <el-switch v-model="menu.is_enable" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
          </el-form-item>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel('menu')">取 消</el-button>
        <el-button type="primary" @click="submit('menu')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getMenuList,
  addMenu,
  editMenu,
  deleteMenu
} from '@/api/user-center/menu'
import { menu, icon } from '@/utils'
import { setTimeout } from 'timers'
export default {
  data() {
    return {
      menus: [],
      menuOptions: [],
      dialogVisible: false,
      iconList: icon.iconList,
      root: true,
      isAdd: true,
      editData: [],
      menu: {
        name: '',
        title: '',
        icon: 'iconmoren',
        path: '',
        component_path: '',
        parent_id: '',
        is_enable: true
      },
      componentRules: {
        title: [{ required: true, message: '请输入菜单标题', trigger: 'blur' }],
        name: [{ required: true, message: '请输入路由名字', trigger: 'blur' }],
        path: [{ required: true, message: '请输入路由路径', trigger: 'blur' }],
        parent_id: [
          { required: true, message: '请选择父级目录', trigger: 'change' }
        ],
        component_path: [
          { required: true, message: '请输入文件路径', trigger: 'blur' }
        ]
      },
      menuProps: {
        value: 'id',
        label: 'title'
      },
      defaultProps: {
        children: 'children',
        label: 'title'
      }
    }
  },
  beforeMount() {
    this.getMenuList()
  },
  methods: {
    handleChange(data) {
      this.menu.parent_id = data[data.length - 1]
    },
    // 获取菜单列表
    getMenuList() {
      getMenuList().then(res => {
        menu.handleMenu(res)
        this.menus = menu.generateMenu(res)
      })
    },
    // 新增或者编辑菜单
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { is_enable, parent_id, name, icon } = this.menu
          let params = { ...this.menu }
          params.is_enable = is_enable ? 1 : 0
          params.parent_id = parent_id || 0
          params.name = name || 'adm'
          params.icon = this.root ? icon : 'second'
          if (this.isAdd) {
            addMenu(params).then(() => {
              this.$message.success('新增成功')
              this.getMenuList()
              this.cancel()
            })
          } else {
            editMenu(params).then(() => {
              this.$message.success('编辑成功')
              this.getMenuList()
              this.cancel()
            })
          }
        }
      })
    },
    // 取消
    cancel(formName = 'menu') {
      this.$refs[formName].resetFields()
      this.dialogVisible = false
    },
    addMenu() {
      this.isAdd = true
      this.dialogVisible = true
      this.resetParams()
    },
    // 新增一级菜单
    addFirstMenu() {
      this.root = true
      this.addMenu()
    },
    // 新增二级菜单
    addSecondMenu() {
      this.root = false
      this.addMenu()
    },
    // 重置参数
    resetParams() {
      this.menuOptions = []
      this.menu = {
        name: '',
        title: '',
        icon: 'iconmoren',
        path: '',
        component_path: '',
        parent_id: '',
        is_enable: true
      }
    },
    // 删除菜单
    removeMenu({ id }) {
      this.$confirm('此操作将永久删除该菜单, 是否继续?', '删除菜单操作？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteMenu(id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.getMenuList()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    editMenu(data) {
      this.isAdd = false
      this.dialogVisible = true
      const {
        name,
        title,
        icon,
        path,
        component_path,
        parent_id,
        is_enable,
        idList = [],
        id
      } = data
      // debugger
      if (!idList.length) {
        this.root = true
      } else {
        this.root = false
        this.menuOptions = [...idList]
      }
      this.menu = { ...data }
      this.menu = {
        name,
        title,
        icon: icon || 'rnewj',
        path,
        component_path,
        parent_id,
        is_enable: is_enable === 1 ? true : false,
        id
      }
    },
    renderContent(h, { node, data, store }) {
      let editMenu
      let deleteMenu
      if (this.searchInterface('menus.update')) {
        editMenu = (
          <el-button
            style="font-size: 12px;"
            type="text"
            on-click={() => this.editMenu(data, store)}
          >
            编辑
          </el-button>
        )
      }
      if (this.searchInterface('menus.destroy')) {
        deleteMenu = (
          <el-button
            style="font-size: 12px;"
            type="text"
            on-click={() => this.removeMenu(data, store)}
          >
            删除
          </el-button>
        )
      }
      return (
        <span style="flex:0.2;display: flex;align-items: center; justify-content: space-between; font-size: 14px; padding-right: 8px;">
          <span>
            <span>{node.label}</span>
          </span>
          <span>
            {deleteMenu}
            {editMenu}
          </span>
        </span>
      )
    }
  }
}
</script>

<style lang="scss">
.menu-admin {
  width: 100%;
  height: 100%;
  background: #fff;
  padding: 20px;
  box-sizing: border-box;
  .add-menu {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 20px;
  }
  .edit-menu {
    border: 1px solid rgba(0, 0, 0, 0.15);
    padding: 10px 20px;
    margin-bottom: 100px;
  }
}
</style>